<template>
  <div>
    <h2>二手物品审核</h2>
    <div style="margin-top:15px;border-bottom: 1px solid #e1e1e1;width:100%"></div>
    <div class="search-bar">
      <Input
        v-for="(item,index) in searchList"
        :key="index"
        v-model="item.value"
        :placeholder="item.label"
        class="il in"
      />
      <Button class="il" @click="clear()">清空</Button>
      <Button class="il" type="primary" @click="search()" style="width:100px">搜索</Button>
    </div>

    <el-table :data="data" style="width: 100%;margin-top:15px">
      <el-table-column prop="id" label="ID" width="50px"></el-table-column>
      <el-table-column prop="createTime" label="发布时间"></el-table-column>
      <el-table-column prop="category" label="所属分类"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="content" label="详情"></el-table-column>
      <el-table-column  label="商品图片" >  
        <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row.image)">查看</el-button>
      </template>
      </el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="nickName" label="微信昵称"></el-table-column>
      <el-table-column prop="phone" label="用户电话"></el-table-column>
      <el-table-column prop="text" label="用户地址"></el-table-column>
      <el-table-column
        :filters="[{text:'待审核',value:0},{text:'已上架',value:1}]"
        :filter-method="filterStatus"
        label="订单状态"
        width="120"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.isShow == 1 ? 'success' : 'danger'"
            disable-transitions
          >{{scope.row.isShow == 1? "已上架":"待审核"}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <el-button class="el-dropdown-link" type="text">
              操作
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div style="width:100px" @click="update(1,scope.row.id)">上架处理</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div style="width:100px" @click="update(0,scope.row.id)">不予上架</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div class="flexr-end" style="margin-top:20px">
      <Page
        :total="total"
        :current="getDataListquery.page"
        :page-size="getDataListquery.size"
        show-sizer
        show-total
        @on-change="changePage"
        @on-page-size-change="changeSize"
      />
    </div>
    <el-dialog title="商品图片" :visible.sync="newDialog" width="50%" center>
      <div class="flexr-center item-center" style="width:100%;" v-for="item in image">
        <img :src="item" height="300px" width="180px" alt="" class="margin-bottom-ershi"  style="border: 2px solid gainsboro">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style>
@import url("../../assets/css/component.css");
</style>
<script>
var that;
export default {
  data() {
    return {
      newDialog:false,
      data: [],
      total: 0,
      searchList: [
        { key: "phone", value: "", label: "输入用户电话" }
      ],
      image:[],
      getDataListquery: {
        page: 1,
        size: 10,
        schoolId: sessionStorage.getItem("schoolId"),
        isDelete: 0
      },
    };
  },
  mounted() {
    that = this;
    this.getDataList();
  },
  methods: {
    //查询兑换的订单
    getDataList() {
      this.$http
        .post(this.com.NODE_API + "/ops/secondhand/find", this.getDataListquery, {
          headers: { token: sessionStorage.getItem("token") },
          emulateJSON: true
        })
        .then(res => {
          if (res.data.code) {
            for (var i = 0; i < res.data.params.list.length; i++){
              // res.data.params.list[i].nickName = decodeURI(res.data.params.list[i].nickName);
              res.data.params.list[i].image = res.data.params.list[i].image.split(",");
            }
            that.data = res.data.params.list;
            that.total = res.data.params.total;
          } else {
            that.$message({
              showClose: true,
              type: "error",
              message: res.data.msg
            });
          }
        });
    },
    //搜索
    // search() {
    //   if (this.searchList[0].value != "" && this.searchList[1].value != "") {
    //     this.getDataListquery = {
    //       page: 1,
    //       size: 10,
    //       exam: "审核失败",
    //       name: this.searchList[0].value,
    //       phone: this.searchList[1].value
    //     };
    //   } else if (
    //     this.searchList[0].value != "" &&
    //     this.searchList[1].value == ""
    //   ) {
    //     this.getDataListquery = {
    //       page: 1,
    //       size: 10,
    //       exam: "审核失败",
    //       name: this.searchList[0].value
    //     };
    //   } else if (
    //     this.searchList[0].value == "" &&
    //     this.searchList[1].value != ""
    //   ) {
    //     this.getDataListquery = {
    //       page: 1,
    //       size: 10,
    //       exam: "审核失败",
    //       phone: this.searchList[1].value
    //     };
    //   }
    //   this.$http
    //     .post(this.com.NODE_API + "/ops/sender/find", this.getDataListquery, {
    //       headers: { token: sessionStorage.getItem("token") },
    //       emulateJSON: true
    //     })
    //     .then(res => {
    //       if (res.data.code) {
    //         that.data = res.data.params.list;
    //         that.total = res.data.params.total;
    //       } else {
    //         that.$message({
    //           showClose: true,
    //           type: "error",
    //           message: res.data.msg
    //         });
    //       }
    //     });
    // },
    //清除搜索内容
    // clear() {
    //   this.getDataListquery = {
    //     page: 1,
    //     size: 10,
    //     exam: "审核失败"
    //   };
    //   for (var i in this.searchList) {
    //     this.searchList[i].value = "";
    //   }
    //   this.getDataList();
    // },
    handleEdit(image){

      that.image = image;
      this.newDialog = true;
    },
    update(e, id) {
      if (e == 0) {
        this.$confirm(
          "此操作将本条记录改为审核失败或下架的状态",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(() => {
          this.$http
            .post(
              this.com.NODE_API + "/ops/secondhand/update",
              { id: id, isDelete: 1 },
              {
                headers: { token: sessionStorage.getItem("token") },
                emulateJSON: true
              }
            )
            .then(res => {
              if (res.data.code) {
                that.$message({
                  showClose: true,
                  type: "success",
                  message: '操作成功'
                });
                this.getDataList();
              } else {
                that.$message({
                  showClose: true,
                  type: "error",
                  message: res.data.msg
                });
              }
            });
        });
      }else{
        this.$confirm(
          "此操作将本条记录改为审核成功并上架的状态",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(() => {
          this.$http
            .post(
              this.com.NODE_API + "/ops/secondhand/update",
              { id: id, isShow: 1 },
              {
                headers: { token: sessionStorage.getItem("token") },
                emulateJSON: true
              }
            )
            .then(res => {
              if (res.data.code) {
                that.$message({
                  showClose: true,
                  type: "success",
                  message: '操作成功'
                });
                this.getDataList();
              } else {
                that.$message({
                  showClose: true,
                  type: "error",
                  message: res.data.msg
                });
              }
            });
        });
      }
    },
    changePage(e) {
      this.getDataListquery.page = e;
      this.getDataList();
    },
    changeSize(e) {
      this.getDataListquery.size = e;
      this.getDataList();
    },
    filterStatus(value, row) {
      return row.is_show == value;
      console.log(111)
    }
  }
};
</script>